<template>
  <div>
    <van-divider :style="{borderColor: '#999', padding: '0 16px'}">猜你喜欢</van-divider>
    <van-card id="num" v-for="item in items" :key="item.id" @click="goDetail(item.id)"
        :num="item.stores"
        :tag="item.recommendStatusStr"
        :price="item.minPrice"
        :desc="item.characteristic ? item.characteristic : '暂无商品描述'"
        :title="item.name"
        :thumb="item.pic"
        :origin-price="item.originalPrice"
        >
        <template #tags>
          <van-tag plain type="danger">打折</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" icon="gouwugouwuchedinggou" @click.stop="addCart(item.id)" icon-prefix="icon"></van-button>
        </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: 'Items',
  methods: {
    // 点击加入购物车
    addCart (id) {
      this.$emit('addCart', id)
    },
    // 跳转到详情页
    goDetail (id) {
      this.$router.push({
        path: '/detail',
        query: { id }
      })
    }
  },
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
#num{
  .van-card__title{
    font-size: 16px;
    padding: 5px;
  }
  .van-card__desc{
    padding: 5px;
  }
  .van-tag{
    margin: 0 5px 5px 5px;
  }
  .van-card__price-currency{
    padding: 5px;
  }
  .icon {
    font-size: 22px;
    color: orangered;
  }
}
</style>
